<template>
	<view>
		<view class="data-box section p-20">
			<view class="item">
				<view class="left">
					<u-image width="50px" height="50px" src="@/static/fuwu.png"></u-image>
				</view>
				<view class="right">
					<view class="label">服务总次数</view>
					<view class="value">5000次</view>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<u-image width="50px" height="50px" src="@/static/juminshu.png"></u-image>
				</view>
				<view class="right">
					<view class="label">覆盖居民数</view>
					<view class="value">5000户</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="title p-30">日志精选</view>
		</view>
		<view class="log-list" v-if="list.length > 0">
			<view class="log-item" v-for="item in list" @click="navTo('/pages/serviceLog/show?id='+item.id)">
				<view class="top">
					<view class="time">{{item.createdDate}}</view>
				</view>
				<view class="bottom">
					<view class="cover">
						<u-image radius="10" width="80px" height="80px" :src="item.coverImageUrl"></u-image>
					</view>
					<view class="info">
						<view class="title">{{item.title}}</view>
						<view class="description">{{item.shortDescription}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="p-30">
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	import {
		getServiceLogList
	} from '@/config/api.js'
	export default {
		data() {
			return {
				tabs: [{
					label: '全部',
					value: ''
				}],
				search: {
					businessType: ''
				},
				loading: false,
				page: 1,
				size: 10,
				status: 'loadmore',
				list: [],
			}
		},
		onLoad() {
			this.getList(true);
		},
		onPullDownRefresh() {
			this.page = 1;
			this.status = 'loadmore';
			this.getList(true);
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			async getList(isRefresh = false) {
				if (this.status === 'loading' || this.status === 'nomore') {
					return;
				}
				this.status = 'loading';
				const res = await getServiceLogList({
					params: {
						...{
							page: this.page,
							size: this.size
						},
						...this.search
					}
				});
				const list = res._embedded?.items || [];
				if (isRefresh) {
					this.list = list;
				} else {
					this.list = this.list.concat(list);
				}
				this.status = res.page.totalElements <= ((res.page.number - 1) * res.page.size + list.length) ?
					'nomore' : 'loadmore';
				this.page = this.page + 1;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.section {
		border-radius: 10px;
		background-color: white;
		width: calc(100% - 60rpx);
		margin-left: auto;
		margin-right: auto;
		margin-top: 30rpx;

		.title {
			font-size: 17px;
			font-weight: bold;
		}
	}

	.data-box {
		display: flex;
		align-items: center;

		.item {
			display: flex;
			width: calc(50% - 20px);
			margin: 10px;

			.left {
				flex-shrink: 0;
			}

			.right {
				flex-grow: 1;
				padding-left: 20rpx;

				.label {
					font-size: 14px;
					color: #888;
				}

				.value {
					margin-top: 20rpx;
					font-size: 18px;
					font-weight: bold;
				}
			}
		}
	}

	.log-list {
		.log-item {
			margin-top: 20rpx;
			border-radius: 10px;
			background-color: white;
			width: calc(100% - 60rpx);
			margin-left: auto;
			margin-right: auto;

			.top {
				padding: 20rpx 30rpx;

				.time {
					color: #888;
					font-size: 14px;
				}
			}

			.bottom {
				border-top: 1rpx solid #eee;
				display: flex;
				padding: 30rpx;

				.cover {
					flex-shrink: 0;
				}

				.info {
					flex-grow: 1;
					padding-left: 20rpx;

					.title {
						font-size: 16px;
						color: #333;
					}

					.description {
						margin-top: 20rpx;
						color: #888;
						font-size: 14px;
					}
				}

			}
		}
	}
</style>